<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-02-06 11:23:56
 * @LastEditTime: 2025-02-19 14:40:08
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \uniapp\src\pagesrepair\applystep.vue
-->
<template>
    <view class="bg-page min-h-screen pt-[10px]">
        <view class="bg-white mb-[10px]">
            <image src="/static/images/repair/step.png" class="w-full " mode="widthFix"></image>
            <view class="py-[32rpx] ml-[32rpx]">
                <view class="text-[36rpx] text-main font-extrabold mb-[38rpx]">维修服务</view>
                <view class="text-base mb-[32rpx] flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">名称：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.name }}</view>
                </view>
                <view class="text-base mb-[32rpx]  flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">手机imei：</view>
                    <view class="text-c3 flex-1">{{ state.pageData?.orderinfo?.imei }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">有效时间：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.start_date }} 至 {{ state.pageData.end_date }}</view>
                </view>
            </view>
        </view>
        <view class="bg-white mb-[10px]">
            <view class="p-[32rpx] ">
                <view class="flex justify-between flex-row items-center mb-[38rpx]">
                    <view class="text-[36rpx] text-main font-extrabold ">返修地址</view>
                    <view @click="copy(state.pageData?.store_info.store_address)"
                        class="text-blue text-base cursor-pointer">复制地址</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">门店名称：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.store_info.store_name }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">门店电话：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.store_info.store_phone }}</view>
                </view>
                <view class="text-base mb-[32rpx]   flex items-start flex-row">
                    <view class="text-muted w-[160rpx]">门店地址：</view>
                    <view class="text-c3 flex-1">{{ state.pageData.store_info.store_address }}</view>
                </view>
            </view>
        </view>

        <view class="py-[60rpx] px-[48rpx]">
            <u-button :loading="isLock" @tap="applyLock" type="primary">立即申请</u-button>

        </view>

        <payment v-model:show="payState.showPay" v-model:show-check="payState.showCheck" :order-id="payState.orderId"
            :from="payState.from" :redirect="payState.redirect" @success="handlePaySuccess" @fail="handlePayFail" />


    </view>
</template>

<script setup lang="ts">
import { applyRepair, apiSearchInsurancePolicy, apiRepairHuanxin } from '@/api/repair'
import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
import { computed, reactive, ref, shallowRef } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'
import { useCopy } from '@/hooks/useCopy'
import { useLockFn } from '@/hooks/useLockFn'
// 使用 useCopy 工具函数
const { copy } = useCopy();
const appStore = useAppStore()
const userStore = useUserStore()
const token = computed(() => userStore.token)
const pageId = ref(0)
const imei = ref()
const fileList = ref([])


const payState = reactive({
    orderId: '',
    from: '',
    showPay: false,
    showCheck: false,
    redirect: '/pagesbaoxian/succ'
})
const handlePaySuccess = async () => {
    payState.showPay = false
    payState.showCheck = false
    uni.redirectTo({
        url: `/pagesrepair/succ?repairId=${state.repairId}`
    })
}
const handlePayFail = async () => {
    uni.$u.toast('支付失败')
}


const state = reactive({
    remark: "",
    pageData: {
        store_info: {
            store_address: ''
        }
    },
    repairId: ''
})


const { isLock, lockFn: applyLock } = useLockFn(async () => {
    if (!token.value) return uni.showModal({
        title: '温馨提示',
        content: '当前账号未登录，无法提交',
        confirmText: '去登录',
        success: async res => {
            if (res.confirm) {
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            }
        }
    })

    let postData = { insurance_policy_id: state.pageData.id }
    // 报修
    const data = await apiRepairHuanxin(postData)

    state.repairId = data.order_id
    payState.orderId = data.order_id
    payState.from = data.from
    payState.showPay = true
})


onLoad((options: any) => {
    if (options.id) {
        apiSearchInsurancePolicy({ id: options.id }).then(res => {
            state.pageData = res
        })
    }
})
</script>

<style lang="scss" scoped></style>
